<template>
	<view class="content">
		<!-- 导航栏 -->
		<headerView />

		<!-- banner图 -->
		<banner />

		<!-- 服务优势 -->
		<view class="cardView">
			<view class="cardView-conter">
				<view class="title">为什么选择 REMAX</view>
				<el-row class="elRow" justify="center" gutter="20">
					<el-col :xs="12" :sm="6" :md="6" :lg="6" v-for="(item, index) in qualityList" :key="index">
						<view class="qualityView">
							<u-icon :customPrefix="item.icon" color="rgb(26, 54, 93)" size="24px"></u-icon>
							<view class="subTitle">{{ item.title }}</view>
							<view class="text">{{ item.text }}</view>
						</view>
					</el-col>
				</el-row>
			</view>
		</view>

		<!-- 产品推荐 -->
		<view class="cardView action">
			<view class="cardView-conter">
				<view class="title">
					<view>精选系列</view>
					<view class="title-text">探索我们的地毯系列，每一款都凝聚着匠人的心血与智慧，为您的空间带来独特的艺术魅力</view>
				</view>

				<el-row class="elRow" justify="center" gutter="20">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="(item, index) in productList" :key="index" class="elCol">
						<productView :row="item" />
					</el-col>
				</el-row>

				<view class="moreiView">
					<el-button class="moreBut" round>
						查看更多产品
						<u-icon customPrefix="custom-icon custom-icon-zhishijiantou" color="#1F2937" size="18px"></u-icon>
					</el-button>
				</view>
			</view>
		</view>

		<!-- 工艺介绍 -->
		<view class="cardView">
			<view class="cardView-conter">
				<el-row class="elRow" justify="center" align="middle" gutter="20">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" class="elCol">
						<view class="introduction">
							<view class="introduction-title">{{ introductionLust.title }}</view>
							<view class="introduction-text">{{ introductionLust.text }}</view>
							<view class="introduction-ul">
								<view class="introduction-ul-li" v-for="(item, index) in introductionLust.list" :key="index">
									<view class="left-icon">0{{ index + 1 }}</view>
									<view class="right-Info">
										<view class="infoTitle">{{ item.title }}</view>
										<view class="infoText">{{ item.text }}</view>
									</view>
								</view>
							</view>
						</view>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" class="elCol">
						<image :src="introductionLust.img" style="width: 100%" mode="widthFix"></image>
					</el-col>
				</el-row>
			</view>
		</view>

		<!-- 底部导航 -->
		<footerView />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import headerView from '@/components/header/index.vue'; //导航
import banner from '@/components/banner/index.vue'; //轮播图
import productView from '@/components/product/index.vue'; //产品
import footerView from '@/components/footer/index.vue'; //底部导航

// 服务优势
const qualityList = ref([
	{ icon: 'custom-icon custom-icon-pinzhi', title: '匠心品质', text: '严选优质材料，精湛工艺打造' },
	{ icon: 'custom-icon custom-icon-wangluo', title: '全球设计', text: '汇集世界顶级设计师灵感' },
	{ icon: 'custom-icon custom-icon-baozhengjin', title: '品质保证', text: '严格质检，15年品质保障' },
	{ icon: 'custom-icon custom-icon-banjiapeisong', title: '专业配送', text: '全球配送，专业安装服务' }
]);

// 推荐产品系列
const productList = ref([
	{ title: '东方传统纹饰地毯', text: '纯手工编织，真丝与羊毛混纺，精细图案', img: 'https://picsum.photos/id/116/800/600', type: '真丝羊毛' },
	{ title: '北欧几何纹理地毯', text: '100%纯新羊毛，机织工艺，耐磨耐用', img: 'https://picsum.photos/id/129/800/600', type: '纯羊毛' },
	{ title: '现代抽象艺术地毯', text: '进口新西兰羊毛，环保染料，色彩持久', img: 'https://picsum.photos/id/139/800/600', type: '纯羊毛' },
	{ title: '民族风情手工地毯', text: '传统工艺手工打结，天然材质，文化传承', img: 'https://picsum.photos/id/146/800/600', type: '真丝' },
	{ title: '简约条纹棉麻地毯', text: '天然棉麻材质，环保舒适，适合现代家居', img: 'https://picsum.photos/id/143/800/600', type: '棉麻' },
	{ title: '现代艺术几何地毯', text: '高品质聚酯纤维，易清洁，适合高流量区域', img: 'https://picsum.photos/id/136/800/600', type: '聚酯纤维' }
]);

// 工艺介绍
const introductionLust = ref({
	title: '匠心工艺 传承百年',
	text: 'REMAX 地毯的每一道工序都凝聚着匠人的智慧与心血，从原材料的精选到成品的检验，我们坚持以最高标准要求自己，确保每一款地毯都能成为传世佳作。',
	list: [
		{ title: '选材严格', text: '我们只选择最优质的材料，确保地毯的耐用性和美观性。每一种原料都经过严格筛选，只有最好的才能进入生产环节。' },
		{ title: '工艺精湛', text: '每一款地毯都经过严格的质量控制，确保每一件都是精品。我们的工匠平均拥有15年以上的制作经验，精通各种传统与现代工艺。' },
		{ title: '设计独特', text: '我们的设计师团队致力于创造独特的设计，让您的地毯成为家居的焦点。每一款设计都融合了东西方美学，既有传统韵味又不失现代感。' },
		{ title: '服务专业', text: '我们提供专业的安装服务，确保地毯能够完美地融入您的家居环境。售后团队全年无休，随时为您解决使用过程中的任何问题。' }
	],
	img: 'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/waimaoWeb/wechat_2025-07-08_092427_643.webp'
});
</script>
<style scoped lang="scss">
.content {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;

	.cardView {
		width: 100%;
		height: auto;
		background-color: #f9fafb;

		&.action {
			background-color: #ffffff;
		}

		&-conter {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 40px 0;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: auto;
				font-family: Roboto, Roboto;
				font-weight: 700;
				font-size: 28px;
				color: rgb(26, 54, 93);
				line-height: 1.6;
				text-align: center;
				margin-bottom: 32px;

				&-text {
					width: 100%;
					height: auto;
					font-family: Roboto, Roboto;
					font-weight: 400;
					font-size: 16px;
					color: #4b5563;
					line-height: 1.5;
					text-align: center;
					margin-bottom: 32px;
				}
			}

			.elRow {
				width: 100%;
				margin: 0 auto !important;

				.elCol {
					margin-bottom: 20px;
				}

				// 服务优势
				.qualityView {
					width: 100%;
					height: auto;
					display: flex;
					flex-direction: column;
					font-family: Roboto, Roboto;
					font-weight: 400;
					font-size: 13px;
					color: #4b5563;
					line-height: 1.5;
					text-align: center;
					align-items: center;

					.icon {
						margin-bottom: 12px;
					}

					.subTitle {
						font-size: 20px;
						font-weight: 700;
						margin-bottom: 4px;
					}
				}
			}

			// 更多产品
			.moreiView {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20px;

				.moreBut {
					font-size: 14px;
					height: auto;

					.u-icon {
						margin-left: 3px;
					}
				}
			}

			// 工艺介绍
			.introduction {
				width: 100%;
				height: auto;

				&-title {
					width: 100%;
					height: auto;
					font-family: Roboto, Roboto;
					font-weight: 700;
					font-size: 28px;
					color: rgb(26, 54, 93);
					line-height: 1.6;
					margin-bottom: 8px;
				}

				&-text {
					width: 100%;
					height: auto;
					font-family: Roboto, Roboto;
					font-weight: 400;
					font-size: 16px;
					color: #4b5563;
					margin-bottom: 20px;
				}

				&-ul {
					width: 100%;
					height: auto;
					display: flex;
					flex-direction: column;
					gap: 10px;

					&-li {
						width: 100%;
						height: auto;
						display: flex;
						align-items: center;
						margin-bottom: 20px;

						.left-icon {
							width: 40px;
							height: 40px;
							border-radius: 50%;
							background-color: rgba(183, 146, 45, 0.1);
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 20px;
							color: rgb(183, 146, 45);
							font-size: 14px;
						}

						.right-Info {
							flex: 1;
							display: flex;
							flex-direction: column;

							.infoTitle {
								font-size: 16px;
								font-weight: 700;
								margin-bottom: 4px;
							}

							.infoText {
								font-size: 14px;
								color: #4b5563;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.content {
		.cardView {
			&-conter {
				padding: 40rpx 20rpx;

				.title {
					font-size: 36rpx;
					margin-bottom: 30rpx;
				}

				.qualityView {
					font-size: 20rpx;
					margin-bottom: 20px;

					.subTitle {
						font-size: 24rpx;
					}
				}

				:deep(.elCol) {
					padding: 0 !important;
				}

				.moreiView {
					margin-top: 0;
				}
			}
		}
	}
}
</style>
